<template>
  <view class="register-container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="handleBack">
        <i class="fas fa-arrow-left"></i>
      </view>
      <view class="title">注册账号</view>
      <view class="placeholder"></view>
    </view>
    
    <!-- 品牌标识 -->
    <view class="brand">
      <image src="https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80" 
             class="logo" mode="aspectFill"></image>
      <view class="slogan">专业家政服务，让生活更美好</view>
    </view>
    
    <!-- 用户类型选择 -->
    <view class="user-type">
      <view class="section-title">您的身份是？</view>
      <view class="type-cards">
        <view 
          class="type-card" 
          :class="{active: userType === '用户'}"
          @click="userType = '用户'"
        >
          <view class="icon">
            <i class="fas fa-user-circle"></i>
          </view>
          <view class="label">我需要家政服务</view>
        </view>
        
        <view 
          class="type-card" 
          :class="{active: userType === '管理员'}"
          @click="userType = '管理员'"
        >
          <view class="icon">
            <i class="fas fa-briefcase"></i>
          </view>
          <view class="label">我是家政服务人员</view>
        </view>
      </view>
    </view>
    
    <!-- 注册表单 -->
    <view class="register-form">
      <view class="form-group">
        <view class="input-with-icon">
          <i class="fas fa-mobile-alt"></i>
          <input 
            type="tel" 
            placeholder="请输入手机号码" 
            v-model="formData.phone"
            @blur="validatePhone"
          />
        </view>
        <view class="error-msg" v-if="errors.phone">{{ errors.phone }}</view>
      </view>
      
      <view class="form-group">
        <view class="input-with-icon">
          <i class="fas fa-key"></i>
          <input 
            type="text" 
            placeholder="请输入验证码" 
            v-model="formData.code"
          />
          <view 
            class="code-btn" 
            :class="{disabled: countdown > 0}"
            @click="sendVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
          </view>
        </view>
        <view class="error-msg" v-if="errors.code">{{ errors.code }}</view>
      </view>
      
      <view class="form-group">
        <view class="input-with-icon">
          <i class="fas fa-lock"></i>
          <input 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请设置6-20位密码" 
            v-model="formData.password"
            @blur="validatePassword"
          />
          <view class="password-toggle" @click="showPassword = !showPassword">
            <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
          </view>
        </view>
        <view class="error-msg" v-if="errors.password">{{ errors.password }}</view>
      </view>
      
      <view class="form-group">
        <view class="input-with-icon">
          <i class="fas fa-lock"></i>
          <input 
            :type="showConfirmPassword ? 'text' : 'password'" 
            placeholder="请再次输入密码" 
            v-model="formData.confirmPassword"
            @blur="validateConfirmPassword"
          />
          <view class="password-toggle" @click="showConfirmPassword = !showConfirmPassword">
            <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
          </view>
        </view>
        <view class="error-msg" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</view>
      </view>
      
      <view class="agreement">
        <checkbox-group @change="agreed = !agreed">
          <label>
            <checkbox :checked="agreed" color="#FF7D00" />
            <text>我已阅读并同意</text>
            <text class="link">《用户协议》</text>
            <text>和</text>
            <text class="link">《隐私政策》</text>
          </label>
        </checkbox-group>
        <view class="error-msg" v-if="!agreed && formSubmitted">请同意用户协议和隐私政策</view>
      </view>
      
      <view class="register-btn" @click="handleRegister">
        注册账号
      </view>
      
      <view class="login-link">
        已有账号？<text class="link" @click="handleLogin">立即登录</text>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
// 表单数据
const userType = ref('customer');
const formData = reactive({
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
});
const errors = reactive({
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
});
const showPassword = ref(false);
const showConfirmPassword = ref(false);
const countdown = ref(0);
const agreed = ref(false);
const formSubmitted = ref(false);
const defaultCode = ref(12345)


const validatePassword = () => {
  if (formData.password.length < 6 || formData.password.length > 20) {
    errors.password = '密码长度需在6-20位之间';
  } else {
    errors.password = '';
  }
};
// 确认密码验证
const validateConfirmPassword = () => {
  if (formData.confirmPassword !== formData.password) {
    errors.confirmPassword = '两次输入的密码不一致';
  } else {
    errors.confirmPassword = '';
  }
};
const sendVerificationCode = () => {
	formData.code=defaultCode.value
  if (countdown.value > 0) return;

  // 模拟发送验证码
  console.log('发送验证码到:', formData.phone);
  uni.showToast({ title: '验证码已发送' });

  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) clearInterval(timer);
  }, 1000);
};

// 注册处理函数
const handleRegister = async () => {
  formSubmitted.value = true;

  // 验证所有字段
  validatePassword();
  validateConfirmPassword();

  if (Object.values(errors).some(error => error !== '')) {
      uni.showToast({ title: '请检查表单错误', icon: 'none' });
      return;
  }


  if (!agreed.value) {
    uni.showToast({ title: '请同意用户协议和隐私政策', icon: 'none' });
    return;
  }

  try {
    // 构造要提交的数据
    const newUser = {
      id: Date.now(), // 假设生成唯一 ID
	  username:"用户1",
      phone: formData.phone,
      password: formData.password,
      role: userType.value === '用户' ? '用户' : '服务人员',
    };

    // 提交到 json-server
    const res = await axios.post('http://localhost:3000/users', newUser);

    uni.showToast({ title: '注册成功', icon: 'success' });

    setTimeout(() => {
      // 跳转登录页或首页
      uni.navigateBack(); // 返回上一页
    }, 1000);
  } catch (error) {
    console.error(error);
    uni.showToast({ title: '注册失败，请重试', icon: 'none' });
  }
};
















// 返回
const handleBack = () => {
  uni.navigateBack();
};

// 跳转到登录
const handleLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};
</script>

<style lang="scss">
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

page {
  background-color: #f8f9fa;
  height: 100%;
}

.register-container {
  padding: 20rpx 40rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    
    .back-btn {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      background-color: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      font-size: 36rpx;
    }
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .placeholder {
      width: 70rpx;
    }
  }
  
  .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40rpx 0 60rpx;
    
    .logo {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 6rpx solid #fff;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    }
    
    .slogan {
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #666;
    }
  }
  
  .user-type {
    margin-bottom: 60rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }
    
    .type-cards {
      display: flex;
      justify-content: space-between;
      
      .type-card {
        width: 48%;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 40rpx 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        border: 2rpx solid #e9ecef;
        
        &.active {
          border-color: #FF7D00;
          background-color: rgba(255, 125, 0, 0.05);
          transform: translateY(-10rpx);
          box-shadow: 0 15rpx 35rpx rgba(255, 125, 0, 0.15);
          
          .icon {
            background-color: rgba(255, 125, 0, 0.1);
            color: #FF7D00;
          }
          
          .label {
            color: #FF7D00;
            font-weight: bold;
          }
        }
        
        .icon {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          background-color: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 50rpx;
          color: #666;
          margin-bottom: 30rpx;
          transition: all 0.3s ease;
        }
        
        .label {
          font-size: 28rpx;
          color: #666;
          text-align: center;
          transition: all 0.3s ease;
        }
      }
    }
  }
  
  .register-form {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    
    .form-group {
      margin-bottom: 40rpx;
      
      .input-with-icon {
        display: flex;
        align-items: center;
        height: 100rpx;
        background-color: #f8f9fa;
        border-radius: 12rpx;
        padding: 0 30rpx;
        position: relative;
        
        i {
          font-size: 36rpx;
          color: #999;
          margin-right: 20rpx;
        }
        
        input {
          flex: 1;
          height: 100%;
          font-size: 30rpx;
          color: #333;
        }
        
        .code-btn {
          position: absolute;
          right: 20rpx;
          top: 50%;
          transform: translateY(-50%);
          background-color: #FF7D00;
          color: #fff;
          padding: 10rpx 20rpx;
          border-radius: 10rpx;
          font-size: 26rpx;
          
          &.disabled {
            background-color: #ccc;
          }
        }
        
        .password-toggle {
          position: absolute;
          right: 20rpx;
          top: 50%;
          transform: translateY(-50%);
          font-size: 36rpx;
          color: #999;
        }
      }
      
      .error-msg {
        color: #ff4d4f;
        font-size: 24rpx;
        margin-top: 10rpx;
        padding-left: 10rpx;
      }
    }
    
    .agreement {
      margin: 40rpx 0;
      font-size: 26rpx;
      color: #666;
      
      .link {
        color: #FF7D00;
      }
    }
    
    .register-btn {
      height: 90rpx;
      background: linear-gradient(to right, #FF9D00, #FF7D00);
      color: #fff;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34rpx;
      font-weight: bold;
      box-shadow: 0 8rpx 20rpx rgba(255, 125, 0, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(4rpx);
        box-shadow: 0 4rpx 10rpx rgba(255, 125, 0, 0.3);
      }
    }
    
    .login-link {
      text-align: center;
      margin-top: 40rpx;
      font-size: 28rpx;
      color: #666;
      
      .link {
        color: #FF7D00;
        font-weight: bold;
      }
    }
  }
  
  .decoration {
    position: absolute;
    z-index: -1;
    
    .circle {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255, 125, 0, 0.1), rgba(255, 125, 0, 0.05));
    }
    
    .circle-1 {
      width: 400rpx;
      height: 400rpx;
      top: -150rpx;
      right: -150rpx;
    }
    
    .circle-2 {
      width: 300rpx;
      height: 300rpx;
      bottom: 100rpx;
      left: -100rpx;
    }
    
    .circle-3 {
      width: 200rpx;
      height: 200rpx;
      bottom: 300rpx;
      right: 100rpx;
    }
  }
}
</style>
